<template>
  <!-- 物业库 -->
  <div class="propertyArchivePage">
    <!-- tag菜单组件 -->
    <IncomeTagMenu projectName="资产经营管理" menuName="资源库" />
    <div class="content">
      <div class="searchBox">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="搜索">
            <el-input
              v-model="searchForm.searchVal"
              placeholder="根据客户名和手机号搜索"
              maxlength="32"
              clearable
              style="width: 200px;"
              @keyup.enter="searchBtn"
            />
          </el-form-item>
          <el-form-item label="是否自招">
            <el-select v-model="searchForm.selectedTypeVal" class="w-135">
              <el-option
                v-for="item in recruitTypeOptionsArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-button
            class="m-r10"
            color="#FF7B50"
            style="color: #fff"
            type="primary"
            @click="searchBtn"
            >查看</el-button
          >
          <el-button color="#F0F0F0" @click="resetBtn">重置</el-button>
          <el-divider class="searchDivider" direction="vertical" />
          <el-button
            plain
            class="button_edit"
            @click="goPropertyAdd"
          >
            新增物业</el-button
          >
        </el-form>
      </div>
      <PublicStatistics
        :cardArr="cardInfo.cardArr"
        getWidth="393px"
      ></PublicStatistics>
      <el-table
        v-loading="tableLoadingFlag"
        :data="state.tableData"
        tooltip-effect="dark"
        style="width: 100%; margin-bottom: 23px"
      >
        <el-table-column type="index" label="序号" width="55" align="center">
        </el-table-column>
        <el-table-column
          prop="propertyCompanyName"
          label="物业服务单位名称"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="是否为公司自招"
          width="200"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.type == 1 ? "自招" : "非自招" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="propertyFeeUnitPrice"
          label="物业费单价（元）"
          width="150"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.propertyFeeUnitPrice }}
          </template>
        </el-table-column>

        <el-table-column
          prop="contactUserName"
          label="联系人姓名"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="contactPhone"
          label="联系电话"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="220" align="center" fixed="right">
          <template #default="scope">
            <el-button
              color="#FF7B50"
              style="color: #fff"
              size="small"
              type="primary"
              @click="checkBankAccount(scope.row.propertyCompanyId)"
              >查看银行账户</el-button
            >
            <el-button
              class="button_edit"
              plain
              size="small"
              @click="goPropertyEdit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:page-size="defualtPageSize"
        :total="state.total"
        :page-sizes="[20, 30, 40, 50, 100, 150, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="state.currentPage"
        @current-change="currentPageChange"
      />
    </div>
    <el-dialog
      title="客户的银行账户明细"
      v-model="dialogState.dialogVisible"
      width="961px"
      class="dialogBox"
      center
      :close-on-click-modal="false"
    >
      <el-table
        :data="dialogState.accountTableData"
        v-loading="accountTableLoadFlag"
        border
      >
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column
          prop="date"
          label="账户名称"
          width="180"
          align="center"
        />
        <el-table-column
          prop="name1"
          label="纳税人识别号"
          width="200"
          align="center"
        />
        <el-table-column
          prop="name"
          label="开户银行"
          width="200"
          align="center"
        />
        <el-table-column prop="address" label="银行账号" align="center" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import {
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElSelect,
  ElOption,
  ElIcon,
  ElPagination,
  ElDialog,
} from "element-plus";
import { recruitTypeOptionsArr } from "@/common/dict/dictCollect";
import { jsonParseStringfy, numToFixed } from "@/common/utils/GlobalUtils";
import PublicStatistics from "@/components/PublicStatistics.vue";
import IncomeTagMenu from "@/components/IncomeTagMenu.vue";
import { propertyApi, customerApi } from "@/api/assets";
import { useRouter } from "vue-router";
const router = useRouter();

const searchForm = reactive({
  searchVal: "",
  selectedTypeVal: 0, // 选中的要展示的列
});
const searchBtn = () => {
  initCustomData();
  initTableData();
};
const resetBtn = () => {
  searchForm.searchVal = "";
  searchForm.selectedTypeVal = 0;
  initCustomData();
  initTableData();
};
const goPropertyAdd = () => {
  router.push({
    path: `/asset/company/propertyAdd/pageType=add`
  });
};
const goPropertyEdit = (row) => {
  router.push({
    path: `/asset/company/propertyEdit/pageType=edit&id=${row.propertyCompanyId}`,
  });
};

const cardInfo = reactive({
  cardArr: [
    {
      title: "物业单位总数",
      num: "--",
      url: require("@/assets/iconImg/hezuokh.png"),
      unit: "个",
    },
    {
      title: "自招物业总数",
      num: "--",
      url: require("@/assets/iconImg/qiyekh.png"),
      unit: "个",
    },
    {
      title: "非自招物业总数",
      num: "--",
      url: require("@/assets/iconImg/gerenkh.png"),
      unit: "个",
    },
  ],
});
// 初始获取客户数
const initCustomData = () => {
  propertyApi.getPropertyCompanyStatistics().then((res) => {
    const { code, data } = res;
    if (code == 200) {
      cardInfo.cardArr[0].num = numToFixed(data.totalNum).split("&")[0];
      if (numToFixed(data.totalNum).split("&")[1])
        cardInfo.cardArr[0].unit =
          numToFixed(data.totalNum).split("&")[1] + "个";

      cardInfo.cardArr[1].num = numToFixed(data.ownNum).split("&")[0];
      if (numToFixed(data.ownNum).split("&")[1])
        cardInfo.cardArr[1].unit = numToFixed(data.ownNum).split("&")[1] + "个";

      cardInfo.cardArr[2].num = numToFixed(data.unOwnNum).split("&")[0];
      if (numToFixed(data.unOwnNum).split("&")[1])
        cardInfo.cardArr[2].unit =
          numToFixed(data.unOwnNum).split("&")[1] + "个";
    }
  });
};

// table相关
const defualtPageSize = ref(50);
const tableLoadingFlag = ref(false);
const state = reactive({
  tableData: [],
  total: 1, // 总条数
  currentPage: 1, // 当前页
});
// 初始获取table数据
const initTableData = () => {
  tableLoadingFlag.value = true;
  const params = {
    pageNum: state.currentPage,
    pageSize: defualtPageSize.value,
    param: {
      queryName: searchForm.searchVal,
      type: searchForm.selectedTypeVal,
    },
  };
  propertyApi.getPropertyCompanyPage(params).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      state.tableData = data.content.map((n, i) => {
        Object.keys(n).forEach((key) => {
          n[key] = n[key] || "--";
        });
        return n;
      });
      state.total = data.totalSize;
      tableLoadingFlag.value = false;
    } else {
      tableLoadingFlag.value = false;
    }
  });
};
const currentPageChange = (val) => {
  state.currentPage = val;
  initTableData();
};

// 弹窗相关
const accountTableLoadFlag = ref(false);
const dialogState = reactive({
  dialogVisible: false,
  accountTableData: [],
});
const checkBankAccount = (id) => {
  dialogState.dialogVisible = true;
  accountTableLoadFlag.value = true;
  customerApi.getBank(id).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      accountTableLoadFlag.value = false;
      dialogState.accountTableData = data.map((n, i) => {
        Object.keys(n).forEach((key) => {
          n[key] = n[key] || "--";
        });
        return n;
      });
    } else {
      accountTableLoadFlag.value = false;
    }
  });
};
onMounted(() => {
  initCustomData();
  initTableData();
});
</script>

<style lang="scss" scoped>
.propertyArchivePage {
  .content {
    .searchBox {
      margin-bottom: 38px;
      .el-form {
        .el-form-item {
          margin-bottom: 0;
        }
        .searchDivider {
          height: 40px;
          margin: 0 30px;
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.propertyArchivePage {
  :deep(.dialogBox) {
    .el-dialog__header {
      padding-top: 18px;
      padding-bottom: 0;
      .el-dialog__title {
        font-size: 16px;
        font-weight: 500;
        color: #1a1a1a;
      }
    }
    .el-dialog__body {
      padding-top: 25px;
      .el-table .el-table__header-wrapper .el-table__header .el-table__cell {
        padding: 20px 0;

        background: #f7f7fa;
        .cell {
          font-weight: 400;
          color: #4d4d4d;
        }
      }
    }
  }
}
</style>
